<template>
  <div>
    <el-badge style="line-height: 25px;margin-top: -5px;" @click.native="handleClick" :value="errorNums" :hidden="hidden">
      <el-tooltip class="item" content="后台连接状态" placement="left">
        <el-popover placement="bottom" title="与后台连接通讯日志：" width="300" popper-class="max-h" trigger="click" >
          <div class="block">
            <div class="radio">
              排序：
              <el-radio-group v-model="reverse">
                <el-radio :label="true">倒序</el-radio>
                <el-radio :label="false">正序</el-radio>
              </el-radio-group>
            </div>
            <div class="timeline" style="margin-top: 10px;">
              <el-timeline :reverse="reverse" style="display:block;max-height: 500px;">
                <el-timeline-item v-for="row in errorLogs" :key="row.url" :timestamp="row.info" :type="row.vm">
                  <el-tag :type="row.vm">
                    {{ row.err }}
                  </el-tag>
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
          <!-- <el-button slot="reference">hover 激活</el-button> -->
          <el-button slot="reference" style="padding: 4px 4px;" :type="buttonType" :icon="connectionIcon">
          </el-button>
        </el-popover>
      </el-tooltip>
    </el-badge>
  </div>
</template>

<script>
export default {
  name: 'ErrorLog',
  mounted() {
    this.$socket.on('connect', () => {
      this.$store.dispatch('app/setServerStatus', 1)
    })
    this.$socket.on('disconnect', () => {
      this.$store.dispatch('errorLog/addErrorLog', {
        err: '订阅推送服务器断开连接',
        vm: 'danger',
        info: this.getTime(),
        url: this.$socket.io.uri
      })
      this.$store.dispatch('app/setServerStatus', 2)
    })
    this.$socket.io.on('reconnect_attempt', () => {
      if (this.$store.getters.errorLogs.length == 0) {
        this.$store.dispatch('errorLog/addErrorLog', {
          err: '订阅推送服务器断开连接',
          vm: 'danger',
          info: this.getTime(),
          url: this.$socket.io.uri
        })
      }
      this.$store.dispatch('app/setServerStatus', 3)
    })
    this.$socket.io.on('reconnect', () => {
      this.$store.dispatch('errorLog/addErrorLog', {
        err: '订阅推送服务器重连成功',
        vm: 'success',
        info: this.getTime(),
        url: this.$socket.io.uri
      })
      this.$store.dispatch('app/setServerStatus', 1)
      this.$bus.$emit('reSubscribe')
    })
  },
  data() {
    return {
      // dialogTableVisible: false,
      hidden: false,
      reverse: false,
    }
  },
  computed: {
    connectionIcon(){
      if (this.$store.getters.serverStatus == 3) {
        return 'el-icon-loading'
      }
      else {
        return 'el-icon-sort'
      }
    },
    buttonType() {
      // console.log(this.$store.getters.serverStatus);
      if (this.$store.getters.serverStatus == 1) {
        return 'success'
      }
      else {
        return 'danger'
      }
    },
    errorLogs() {
      var log = $.extend(true, [], this.$store.getters.errorLogs)
      return log.reverse()
    },
    errorNums() {
      if (this.$store.getters.errorLogs.length == 0) {
        this.hidden = true
        return 0
      }
      else {
        this.hidden = false
        return this.$store.getters.errorLogs.length
      }
    }
  },
  methods: {
    getTime() {
      let date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      let hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      let minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      let seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      let time = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
      return time
    },
    handleClick() {
      // this.dialogTableVisible = true
      this.hidden = true
    },
    clearMsg() {
      this.hidden = true
      // this.$store.dispatch('errorLog/clearErrorLog')
    }
  }
}
</script>

<style>
.max-h {
  max-height: 800px;
  overflow: auto;
}

.message-title {
  font-size: 16px;
  color: #333;
  font-weight: bold;
  padding-right: 8px;
}
</style>
